
import Vue from "vue"
// 注册全局的指令 + 过滤器 

Vue.directive("shuibowen",{
  inserted(el,binding){
      el.style.overflow = "hidden"
      el.style.position = "relative"

      el.addEventListener("click",function(e){
          var e = e || window.event 
          var x = e.clientX  - el.offsetLeft ;
          var y = e.clientY  - el.offsetTop;
          var left = el.offsetLeft
          var top = el.offsetTop
          // console.log(x,y)
          // console.log(left,top)
          var span = document.createElement("span")
          span.style.pointerEvents = 'none'
          span.style.position = "absolute"
          span.style.left = x +"px"
          span.style.top  = y +"px"
          span.style.borderRadius="50%"
          span.style.background = "rgba(0,0,0,.5)"
          el.append(span)

          var width = 0;
          var height = 0;
          var opacity  = 1;
          var timer = setInterval(()=>{
            width+=10
            height+=10
            opacity -= 0.02 

            
            span.style.left = x - span.clientWidth/2 + 'px'
            span.style.top = y - span.clientHeight/2 + 'px'

            span.style.width  = width +"px"
            span.style.height  = height +"px"
            span.style.opacity  = opacity

            if(span.style.opacity <=0){
                span.remove()
                clearInterval(timer)
            }

          },10)
      })
  }
})